<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息管理 - 航班数据分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .nav-active {
            background-color: rgba(255,255,255,0.2);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <nav class="bg-primary text-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-plane text-2xl"></i>
                <h1 class="text-xl font-bold">航班数据分析系统</h1>
            </div>
            <div class="hidden md:flex space-x-1">
                <a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                    class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">首页</a>
                <a href="{{ url_for('routes') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航线分布</a>
                <a href="{{ url_for('airlines') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航空公司</a>
                <a href="{{ url_for('statistics') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航班统计</a>
                <a href="{{ url_for('price_revenue') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">票价-收入分析</a>
                <a href="{{ url_for('about') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">关于系统</a>
            </div>
            <button class="md:hidden text-white focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 模块标题区  -->
    <div class="bg-gradient-to-r from-pink-600 to-rose-600 py-12 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-4">用户信息管理</h2>
            <p class="max-w-2xl mx-auto mb-6">查看、筛选和管理用户信息</p>
            <button class="bg-white text-pink-600 px-6 py-2 rounded-full font-medium shadow-lg hover:bg-gray-100 transition-colors"
                    onclick="window.location.href='{{ url_for('admin_index') }}'">
                <i class="fa fa-home mr-2"></i>返回首页
            </button>
        </div>
    </div>

    <!-- 主体内容 -->
    <main class="container mx-auto px-4 py-8 flex-grow">
        {% if error %}
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
            <strong class="font-bold">错误!</strong>
            <span class="block sm:inline">{{ error }}</span>
        </div>
        {% endif %}

        <!-- 添加更新成功提示 -->
        {% if updated %}
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6" role="alert">
            <strong class="font-bold">成功!</strong>
            <span class="block sm:inline">用户信息已更新</span>
        </div>
        {% endif %}

        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full min-w-full">
                    <thead>
                        <tr class="bg-gray-100">
                            <th class="py-3 px-4 text-left font-semibold text-gray-700 border-b">用户ID</th>
                            <th class="py-3 px-4 text-left font-semibold text-gray-700 border-b">用户名</th>
                            <th class="py-3 px-4 text-left font-semibold text-gray-700 border-b">邮箱</th>
                            <th class="py-3 px-4 text-left font-semibold text-gray-700 border-b">角色</th>
                            <th class="py-3 px-4 text-center font-semibold text-gray-700 border-b">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr class="border-b hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4">{{ user[0] }}</td>
                            <td class="py-3 px-4">{{ user[1] }}</td>
                            <td class="py-3 px-4">{{ user[3] }}</td>
                            <td class="py-3 px-4">
                                <span class="px-2 py-1 rounded text-xs
                                    {% if user[4] == 'admin' %}
                                        bg-blue-100 text-blue-800
                                    {% else %}
                                        bg-green-100 text-green-800
                                    {% endif %}">
                                    {{ user[4] }}
                                </span>
                            </td>
                            <td class="py-3 px-4 text-center space-x-2">
                                <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600"
                                        onclick="editUser({{ user[0] }}, '{{ user[1] }}', '{{ user[4] }}')">
                                    编辑
                                </button>
                                <button class="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600"
                                        onclick="confirmDelete({{ user[0] }}, '{{ user[1] }}')">
                                    删除
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-6 text-right">
            <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors"
                    onclick="openAddUserModal()">
                <i class="fa fa-plus mr-2"></i>新增用户
            </button>
        </div>
    </main>

    <!-- 用户编辑模态框 -->
    <div id="userModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 relative">
            <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-700" onclick="closeUserModal()">
                <i class="fa fa-times text-xl"></i>
            </button>
            <h3 id="modalTitle" class="text-xl font-bold mb-4">新增用户</h3>
            <form id="userForm" method="post">
                <input type="hidden" id="userId" name="user_id">
                <div class="mb-4">
                    <label class="block text-gray-700 mb-1">用户名</label>
                    <input type="text" id="username" name="username" class="w-full border rounded px-3 py-2" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <input type="password" id="password" name="password" class="w-full border rounded px-3 py-2 pr-10"
                               placeholder="编辑用户时留空表示不修改">
                        <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
                              onclick="toggleModalPasswordVisibility()">
                            <i class="fa fa-eye"></i>
                        </span>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">注：编辑用户时留空表示不修改密码</p>
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 mb-1">角色</label>
                    <select id="role" name="role" class="w-full border rounded px-3 py-2" required>
                        <option value="admin">管理员</option>
                        <option value="users">普通用户</option>
                    </select>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" class="px-4 py-2 rounded border hover:bg-gray-100"
                            onclick="closeUserModal()">取消</button>
                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                        确认
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- JavaScript 部分 -->
    <script>
        // 确认删除
        function confirmDelete(userId, username) {
            if (confirm(`确定要删除用户 "${username}" 吗? 此操作不可撤销。`)) {
                window.location.href = `/delete_user/${userId}`;
            }
        }

        let currentDeleteUserId;
        let passwordVisible = false;

        // 切换表格中密码可见性
        function togglePasswordVisibility(button, userId) {
            const displaySpan = button.previousElementSibling;
            if (displaySpan.textContent === '******') {
                // 实际应用中这里应通过AJAX从服务器获取真实密码
                displaySpan.textContent = 'encrypted'; // 占位符
                button.innerHTML = '<i class="fa fa-eye-slash"></i>';
            } else {
                displaySpan.textContent = '******';
                button.innerHTML = '<i class="fa fa-eye"></i>';
            }
        }

        // 切换模态框中密码可见性
        function toggleModalPasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const toggleIcon = document.querySelector('#userModal .password-toggle i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleIcon.className = 'fa fa-eye-slash';
            } else {
                passwordInput.type = 'password';
                toggleIcon.className = 'fa fa-eye';
            }
        }

        // 打开添加用户模态框
        function openAddUserModal() {
            document.getElementById('modalTitle').textContent = '新增用户';
            document.getElementById('userForm').reset();
            document.getElementById('userId').value = '';
            document.getElementById('role').value = 'users';
            document.getElementById('userForm').action = "{{ url_for('add_user_route') }}";
            document.getElementById('userModal').classList.remove('hidden');
        }

        // 打开编辑用户模态框
        function editUser(userId, username, role) {
            document.getElementById('modalTitle').textContent = '编辑用户';
            document.getElementById('userId').value = userId;
            document.getElementById('username').value = username;
            document.getElementById('role').value = role;
            document.getElementById('password').value = '';
            document.getElementById('userForm').action = "{{ url_for('update_user_route') }}";
            document.getElementById('userModal').classList.remove('hidden');
        }

        // 删除用户
        function deleteUser(userId) {
            currentDeleteUserId = userId;
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        // 关闭模态框
        function closeUserModal() {
            document.getElementById('userModal').classList.add('hidden');
            passwordVisible = false;
            document.getElementById('password').type = 'password';
            document.querySelector('.password-toggle i').className = 'fa fa-eye';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
        }

        // 显示操作成功提示
        function showSuccessMessage(message) {
            const successMessage = document.getElementById('successMessage');
            successMessage.textContent = message;
            successMessage.style.opacity = 1;
            setTimeout(() => {
                successMessage.style.opacity = 0;
            }, 3000);
        }

        // 页面加载时检查URL参数
        window.onload = function() {
            const urlParams = new URLSearchParams(window.location.search);
            const action = urlParams.get('action');

            if (action) {
                let message = '';
                if (action === 'add') {
                    message = '用户添加成功';
                } else if (action === 'delete') {
                    message = '用户删除成功';
                } else if (action === 'update') {
                    message = '用户信息更新成功';
                }
                showSuccessMessage(message);

                // 清除URL参数
                const newUrl = window.location.href.split('?')[0];
                window.history.replaceState({}, document.title, newUrl);
            }
        };
    </script>
</body>
</html>